import React from 'react'
import * as echarts from 'echarts'


const mystyle = { height: "100%", width: "100%" }



class EchartsBar extends React.Component {

    //在挂在完后执行的方法
    componentDidMount = () => {
        const { myData, myText } = this.props
        this.myEchartsBar = echarts.init(document.getElementById("myEchartsBar"))
        this.showEchartsBar(myData, myText)
    }

    showEchartsBar = (myData, myText) => {
        let option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: myText,
                axisTick: {
                    alignWithLabel: true
                },
                axisLabel: {
                    color: '#fff'
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    color: '#fff'
                }
            },
            series: [
                {
                    name: 'Direct',
                    type: 'bar',
                    barWidth: '60%',
                    itemStyle: {
                        color: '#ff5733'
                    },
                    data: myData
                }
            ]
        }
        this.myEchartsBar.setOption(option);
    }

    hadbeClick = (msg, e) => {
        console.log(123456, msg, e)
        this.props.onGetMsg('这个数据是子模块的')
    }

    render() {
        return (
            <div style={{ height: "100%" }}>
                {/* <button
                    style={{ height: "30px" }}
                    onClick={(e) => this.hadbeClick('abc', e)}
                >测试</button> */}
                <div id="myEchartsBar" style={mystyle}></div>
            </div>
        )
    }
}

export default EchartsBar